{layout name="public/layout" /}
{include file='yxnavbar'}


<div class="main">
    {include file='sms/sms_header'}
    <div class="panel panel-default" role="tabpanel">
        <div class="panel-heading">{php echo $item['id']?'编辑':'创建';}高级模版</div>
        <div class="panel-body">
            <form action="" method="post" class="form-horizontal" role="form" name="form2" id="form2">
                <input type="hidden" name="id" value="{$item['id']}"/>
                <input type="hidden" name="themeid" value="{$themeid}"/>
                <input type="hidden" name="template_id" value="{$item['id']}"/>
                <input type="hidden" name="template_name" value="{$item['template_name']}"/>
                <div class="form-group">
                {if $no_pass_tips}<label ><span style="color: red;">{php echo $no_pass_tips;}</span></label>{/if}
                </div>
<!--                <div class="form-group">-->
<!--                    <label class="col-xs-12 col-sm-4 col-md-3 col-lg-2 control-label"><span style="color: red;">*</span>短信模版名称</label>-->
<!--                    <div class="col-sm-8 col-xs-12">-->
<!--                        <input type="text" class="form-control" placeholder="请输入短信模版名称"   name="template_name"  value="{$item['out_template_name']}">-->
<!--                    </div>-->
<!--                </div>-->
                <div class="form-group">
                    <label class="col-xs-12 col-sm-4 col-md-3 col-lg-2 control-label"><span style="color: red;">*</span>短信模版使用说明</label>
                    <div class="col-sm-8 col-xs-12">
                        <input type="text" class="form-control"  placeholder="请输入短信用途，详细填写便于更快通过审核" name="remark"  value="{$item['remark']}">
                        <span class="help-block" >短信模版创建后，提交给短信运营商审核，具体审核时间由运营商确定</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label"><span style="color: red;">*</span>短信模版类型</label>
                    <div class="col-sm-8  col-xs-12">
                        <label class="radio-inline">
                            <input name="template_type" class="template_type" value="1" {if $item['template_type']==1 || !$item['template_type']} checked="checked"{/if} type="radio"> 短信通知
                        </label>
                        <label class="radio-inline">
                            <input name="template_type" class="template_type" value="2" {if $item['template_type']==2} checked="checked"{/if} type="radio"> 推广短信
                        </label>
                    </div>
                </div>

                <input type="hidden" name="diy_template_params" id="diy_template_params" value="">
                <input type="hidden" name="show_template_params" id="show_template_params" value="">
                <input type="hidden" name="template_content" id="sure_out_template_content" value="">

                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label"><span style="color: red;">*</span>短信模版内容</label>
                    <div class="col-sm-8 col-xs-12">
                        <div style="display: flex">
                            <div style="display: flex;flex-direction: column;">
                                <textarea id="out_template_content" name="out_template_content" style="width: 400px;height: 300px;">{$item['out_template_content']}</textarea>
                                <span class="help-block" >可输入<span id="out_template_content_count">300</span>字符,最多300字符</span>
                                <span class="help-block" style="color: red;" >提示：快捷插入短信变量不可以修改替换，修改替换将导致短信模版审核失败、短信无法发送、发送的短信内容错误等情况</span>
                                <span class="help-block" style="color: blue;" >发送时将按照实际发送短信内容计费，每63个字符为一条短信，请合理规划短信内容</span>
                            </div>
                            <div>
                                <div>快捷插入短信变量</div>
                                <div style="display: flex;flex-direction: column;height: 300px;">
                                    <button onclick="insertSmsTag(this)" type="button" data-type="name" style="margin: 10px 0;background-color: #2a8bee;padding: 4px;color: #ffffff;border-radius: 10px;border: hidden;">插入姓名</button>
                                    <button onclick="insertSmsTag(this)" type="button" data-type="desc" style="margin: 10px 0;background-color: #2a8bee;padding: 4px;color: #ffffff;border-radius: 10px;border: hidden;">插入备注</button>
                                    <button onclick="insertSmsTag(this)" type="button" data-type="address" style="margin: 10px 0;padding: 4px;color: #ffffff;border-radius: 10px;border: hidden;background-color: coral;">插入地址</button>
                                    <button onclick="insertSmsTag(this)" type="button" data-type="shop" style="margin: 10px 0;padding: 4px;color: #ffffff;border-radius: 10px;border: hidden;background-color: forestgreen;">插入店名</button>
                                    <button onclick="insertSmsTag(this)" type="button" data-type="time" style="margin: 10px 0;padding: 4px;color: #ffffff;border-radius: 10px;border: hidden;background-color: darkorchid;">插入时间</button>
                                    <button onclick="insertSmsTag(this)" type="button" data-type="money" style="margin: 10px 0;padding: 4px;color: #ffffff;border-radius: 10px;border: hidden;background-color: darkorchid;">插入金额</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="form-group" id="sub_upload" >
                    <div class="col-sm-12">
                        <input name="submit" onclick="addOrEditItem()"  id="btnConfirm" type="button" value="确认提交" class="btn btn-primary col-lg-2">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
    $('.template_type').on('change',function () {
        console.log(this.value);
        let tmp_value = this.value;
    });
    var sms_name_total =0,sms_address_total=0,sms_time_total=0,sms_shop_total=0,sms_desc_total=0;
    //新增\修改
    $("#out_template_content").on("input propertychange",function () {
        var that = $(this);
        var content = that.val();
        var count = '';
        if (content.length>300){
            that.val(content.substring(0,300));
        }
        count = 300 - content.length;
        $("#out_template_content_count").text(count);
    });
    function inLimitTxtLength(str)
    {
        var tmp_content_length = $("#out_template_content").val().length;
        var input_txt_length = str.length;
        if (tmp_content_length+input_txt_length>300){
            return false;
        }
        return true;
    }
    //插入短信标签
    function insertSmsTag(e) {
        let tmp_val= '';
        let lay_msg = '超过文字长度限制';
        let tmp_type = e.getAttribute("data-type");
        var content = $("#out_template_content").val();
        if (tmp_type=='name'){
            tmp_val='#name_'+(sms_name_total+1)+'#';
            if (!inLimitTxtLength(tmp_val)){
                layer.msg(lay_msg);
                return
            }
            sms_name_total+=1;
        }else if(tmp_type=='address'){
            tmp_val='#address_'+(sms_address_total+1)+'#';
            if (!inLimitTxtLength(tmp_val)){
                layer.msg(lay_msg);
                return
            }
            sms_address_total+=1;
        }else if(tmp_type=='shop'){
            tmp_val='#shop_'+(sms_shop_total+1)+'#';
            if (!inLimitTxtLength(tmp_val)){
                layer.msg(lay_msg);
                return
            }
            sms_shop_total+=1;
        }else if(tmp_type=='time'){
            tmp_val='#time_'+(sms_time_total+1)+'#';
            if (!inLimitTxtLength(tmp_val)){
                layer.msg(lay_msg);
                return
            }
            sms_time_total+=1;
        }else if (tmp_type=='desc'){
            tmp_val='#desc_'+(sms_desc_total+1)+'#';
            if (!inLimitTxtLength(tmp_val)){
                layer.msg(lay_msg);
                return
            }
            sms_desc_total+=1;
        }else if (tmp_type=='money'){
            tmp_val='#money_'+(sms_desc_total+1)+'#';
            if (!inLimitTxtLength(tmp_val)){
                layer.msg(lay_msg);
                return
            }
            sms_desc_total+=1;
        }
        //追加文本
        $("#out_template_content").val(content+tmp_val);
        //判断当前文本域文字长度
    }

    function addOrEditItem() {
        sureTemplate();
        let postUrl = "{php echo createWebUrl('sms',array('op'=>'template_edit','themeid'=>$themeid));}";
        let success_redirect = "{php echo createWebUrl('sms',array('op'=>'template_list','themeid'=>$themeid));}";
        let formData = $("#form2").serialize();
        $.ajax({
            url:postUrl,
            dataType:'json',
            method:'post',
            data:formData,
            success:function (e) {
                let status = e.status;
                let result = e.result;
                console.log(status,result);
                if (status!=1){
                    layer.msg(result.msg)
                }else{
                    layer.msg(result.msg);
                    window.location.href = success_redirect;
                }
            },
            fail:function (err) {
                console.log(err)
            }
        })
    }
    //格式化参数
    function sureTemplate()
    {
        var diy_template_params = '';
        var show_template_params = '';
        var tmp_temp_txt = $("#out_template_content").val();
        var format_tmp_temp_txt = $("#out_template_content").val();

        var m = tmp_temp_txt.split("#");
        m.shift();
        m.forEach(function (val) {
            var reg = /[^\x00-\xff]/ig;
            if (val && val.indexOf('_')>=0 && !reg.test(val)){
                diy_template_params += val+',';
                search_txt_item = '#'+val+'#';
                show_template_params += '#'+val+'#,';
                replace_txt_item = '{%'+val+'%}';
                format_tmp_temp_txt = format_tmp_temp_txt.replace(search_txt_item,replace_txt_item);
            }
        })
        if (diy_template_params.length>0){
            diy_template_params = diy_template_params.substring(0,diy_template_params.length - 1);
        }
        if (show_template_params.length>0){
            show_template_params = show_template_params.substring(0,show_template_params.length - 1);
        }
        // console.log(diy_template_params);
        // console.log(format_tmp_temp_txt);
        $("#show_template_params").val(show_template_params);
        $("#diy_template_params").val(diy_template_params);
        $("#sure_out_template_content").val(format_tmp_temp_txt);
    }
</script>
